<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery.min.js"></script>
</head>

<body>

    <script type="text/javascript">
        // 题目如下，请直接利用写好的方法，并且直接写在题目下方，要可以运行和输出，如第1题所示
        /*
        1、题目描述：
        找出元素 item 在给定数组 arr 中的位置
        输出描述:
        如果数组中存在 item，则返回元素在数组中的位置，否则返回 -1
        示例1  indexOf
        输入
        [ 1, 2, 3, 4,3 ], 3
        输出
        2
        */
        // const arr =[1,2,3,4]
        // function indexOf(arr, item) {
        //     for (let index = 0; index < arr.length; index++) {
        //         if (item==arr[index]) {
        //             return index
        //         }
        //     }
        //     return -1
        // }
        // console.log(indexOf(arr,0));
        // console.log(`======= 第1题 =======`);
      

        /*
        2、题目描述：
        计算给定数组 arr 中所有元素的总和 reduce() every()(some()) map() filter() forEach()
        输入描述:
        数组中的元素均为 Number 类型
        示例1
        输入
        
        [ 1, 2, 3, 4 ]
        输出
        
        10*/
        // const arr = [1,2,3,4]
        // var Sum = 0
        // function sum(arr) {
        //     for (let index = 0; index < arr.length; index++) {
        //          Sum+=arr[index]
        //     }
        //     console.log(Sum);
        // }
        // sum(arr)
        console.log(`======= 第2题 =======`);


        /*
        3、题目描述
        在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组
        示例1
        输入
        
        [1, 2, 3, 4],  10
        输出
        
        [1, 2, 3, 4, 10]
        */
    //    const arr = [1, 2, 3, 4]
    //    var item = 10
    //    var len  = arr.length
    //    function append(arr, item) {
    //         arr[len] = item
    //         return arr
    //     }
    //     console.log(append(arr,item));
        console.log(`======= 第3题 =======`);
        /*
        4、题目描述
        合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组
        示例1
        输入
        
        [1, 2, 3, 4], ['a', 'b', 'c', 1]
        输出
        
        [1, 2, 3, 4, 'a', 'b', 'c', 1]
        */
        // const arr1 = [1, 2, 3, 4]
        // const arr2 = ['a', 'b', 'c', 1]
        // function concat(arr1, arr2) {
        //      var arr3=arr1.concat(arr2);
        //      return arr3
        // }
        // console.log(concat(arr1,arr2));
        console.log(`======= 第4题 =======`);
        /*
        5、题目描述
        为数组 arr 中的每个元素求二次方。不要直接修改数组 arr，结果返回新的数组
        示例1
        输入
        
        [1, 2, 3, 4]
        输出
        
        [1, 4, 9, 16]
        */
        const arr =[1, 2, 3, 4]
        // function square(arr) {
        //     for (let index = 0; index < arr.length; index++) {
        //         arr[index]=arr[index]*arr[index]
        //     }
        //     return arr
        // }
        // console.log(square(arr));

        // function square(arr) {
        //     return arr.map(function(elem, index, arr) {
        //         return elem*elem
        //   })
        // }
        // console.log(square(arr))
        console.log(`======= 第5题 =======`);

        /*
        6、题目描述
        定义一个计算圆面积的函数area_of_circle()，它有两个参数：
        
        r: 表示圆的半径；
        pi: 表示π的值，如果不传，则默认3.14
      */
        // function area_of_circle(r,pi=3.14) {
        //     var arean = r*r*pi
        //     return arean;
        // }
        // var r =prompt('请输入圆的半径')
        // alert('圆的面积为'+area_of_circle(r)) 
        console.log(`======= 第6题 =======`);

        /*
        7、题目描述
        用jQuery编程实现获取选中复选框值的函数abc
        HTML结构如下：
        <div>
            <input type="checkbox" name="aa" value="0" />0
            <input type="checkbox" name=" aa " value="1" />1
            <input type="checkbox" name=" aa " value="2" />2
            <input type="checkbox" name=" aa " value="3" />3
            <input type="button" onclick="abc()" value="提 交" />
            <div id="allselect"></div>
        </div>
        */
            function abc() {
                var len = $('input[type="checkbox"]').length
                const arr = []
                for (let index = 0; index < len; index++) {
                    var pd = $('input').eq([index]).prop('checked')
                    if (pd==true) {
                        arr[index]=$('input').eq(index).val()
                    }
                }
                $('#allselect').text('你选择的选项值为：'+arr);
            }
        console.log(`======= 第7题 =======`);

        /*
        8、题目描述
        实现sel函数显示当前选项的文本和值
        <div>
            <form name="a">
                <select name="a" size="1" onchange="_sel(this)">
                <option value="a">1</option>
                <option value="b">2</option>
                <option value="c">3</option>
                </select>
            </form>
        </div>
        */
        function _sel(){
            var index=document.getElementById("select").selectedIndex;//获取当前选择项的索引.
            document.getElementById("select").options[index].value;//获取当前选择项的值.

　          var obj=document.getElementById("select");

        for(i=0;i<obj.length;i++) {//下拉框的长度就是它的选项数.

           if(obj[i].selected==true) {
            var text=obj[i].value;//获取当前选择项的值.
　　　　　　}
        console.log(text);
　　　　}
        }
        
        console.log(`======= 第8题 =======`);

        /*
        9、题目描述
        要求用jQuery完成:  点击id为btn的按钮
        
        a.判断id为username的输入是否为空，如果为空，则弹出“用户名不能为空”的提示。
        
        b.判断id为password的输入字符串个数是否小于6位，如果小于6位，则弹出“你输入的密码长度不可以少于6位”的提示
        
        HTML结构如下：
        <div>
            用户名：<input type="text" id="username"/><br/>
            密  码：<input type="password" id="password"/><br/>
           确认密码：<input type="password" id="password1"/><br/>
            <button id="btnSubmit" type="button">提交</button><br/>
        </div>
        */
        $(function () {
            $('#btnSubmit').click(function () {
                var number = 0;
                var text = $('#username').val()
                var password = $('#password').val()
                var twopassword = $('#password1').val()
                var plen =$('#password').val().length
                if (text=='' && number==0) {
                    alert('用户名不能为空')
                    number++;
                }
                if (plen<6 && number==0) {
                    alert('你输入的密码长度不可以少于6位')
                    number++
                }
                if (password != twopassword && number==0) {
                    alert('你输入的两次密码不一致')
                    number++
                }else if(number==0){
                    alert("提交成功")
                }
            })
        })
        console.log(`======= 第9题 =======`);
        /*
        10、题目描述
        
        在下面的HTML文档中，编写函数test() ,实现如下功能：
        
        （1）当多行文本框中的字符数超过20个，只截取20个字符
        
        （2）在id为number的td中显示文本框的字符个数
        
        HTML结构如下：
        <table>
            <tr>
                <td>留言</td>
                <td id="number"> 0 </td>
            </tr>
            <tr>
                <td colspan=2>
                    <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
                </td>
            </tr>
        </table>
        */
        function test(){
            var len = $('#feedBack').val().length
            if (len>20) {
                $('#feedBack').val($('#feedBack').val().substring(0, 20))
                alert('超出最大留言字数')
                len--
            }
            $('#number').text(len)
        }
        
        console.log(`======= 第10题 =======`);
    </script>
    <!-- <div>
        <input type="checkbox" name="aa" value="0" />0
        <input type="checkbox" name=" aa " value="1" />1
        <input type="checkbox" name=" aa " value="2" />2
        <input type="checkbox" name=" aa " value="3" />3
        <input type="button" onclick="abc()"  value="提 交" />
        <div id="allselect"></div>
    </div> -->
    <!-- <div>
        <form name="a">
            <select name="a" size="1" onchange="_sel()">
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
            </select>
        </form>
    </div> -->
    <!-- <div>
        用户名：<input type="text" id="username"/><br/>
        密  码：<input type="password" id="password"/><br/>
       确认密码：<input type="password" id="password1"/><br/>
        <button id="btnSubmit" type="button">提交</button><br/>
    </div> -->
    <table>
        <tr>
            <td>留言</td>
            <td id="number"> 0 </td>
        </tr>
        <tr>
            <td colspan=2>
                <textarea id="feedBack" onkeyup="test()" rows=6></textarea>
            </td>
        </tr>
    </table>
</body>

</html>